<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS森林LOGO</title>
	<style>
		* {
			margin:0;
			padding:0;
		}
		.css-logo {
			margin: 40px auto auto 30px;
			width: 200px;
			height: 100px;
			position: relative;
			cursor: pointer;
		}
		.logo-color {
			width: 50px;
			height: 60px;
			border-radius: 9px;
			float: left;
		}

		.logo-blank {
			height: 58px;
			width: 20px;
			position: absolute;
			background-color:#fff;
			top:1.4px;
		}

		.logo-blank-1 {
			left:36px;	
		}

		.logo-blank-2 {
			left:83px;
		}

		.logo-blank-3 {
			left:128px;
		}

		.logo-blue {
			background-color: rgb(84,186,243);
		}

		.logo-green {
			background-color: rgb(137,210,40);
			width: 44px;
		}

		.logo-orange {
			background-color: rgb(242,123,46);
			width: 44px;
		}

	</style>
	<script>
	window.onload=function() {
		var obj = document.querySelectorAll('div.css-logo')[0];
		var blanks = document.querySelectorAll('span.logo-blank');
		obj.onmouseover=function(){
			changeLogo(-45);
		}
		obj.onmouseout=function() {
			changeLogo(0);
		}

		function changeLogo(deg) {
			for(var i = 0 ; i<blanks.length;i++) {
				blanks[i].style['-webkit-transform'] = 'rotate('+deg+'deg)';
			}
		}

	}
	</script>
</head>
<body>
	<div class="css-logo">
		<span class="logo-color logo-blue"></span>
		<span class="logo-color logo-blank logo-blank-1"></span>
		<span class="logo-color logo-green"></span>
		<span class="logo-color logo-blank logo-blank-2"></span>
		<span class="logo-color logo-orange"></span>
		<span class="logo-color logo-blank logo-blank-3"></span>
	</div>
</body>
</html>